<template>
  <div class="container">
   <div class="brand-title">
    <el-button type="primary" icon="el-icon-arrow-left"></el-button>
    <p>品牌</p>
   </div>
   <div class="ikea">
    <div class="ikea-logo">
      <img src="../assets/宜家LOGO@2x.png"/>
    </div>
    <div class="ikea-title">
      IKEA宜家
    </div>
    <div class="ikea-button">
      进入品牌专场
    </div>
    <div class="ikea-img">
      <img src="../assets/顾家@2x.png"/>
    </div>
   </div>
   <div class="gujia">
    <div class="gujia-logo">
      <img src="../assets/顾家LOGO@2x.png"/>
    </div>
    <div class="gujia-title">
      顾家家居
    </div>
    <div class="gujia-button">
      进入品牌专场
    </div>
    <div class="gujia-img">
      <img src="../assets/顾家@2x.png"/>
    </div>
   </div>
   <div class="suofeiya">
    <div class="suofeiya-logo">
      <img src="../assets/索菲亚LOGO@2x.png"/>
    </div>
    <div class="suofeiya-title">
      索菲亚衣柜
    </div>
    <div class="suofeiya-button">
      进入品牌专场
    </div>
    <div class="suofeiya-img">
      <img src="../assets/索菲亚@2x.png"/>
    </div>
   </div>
   <banner></banner>
  </div>
</template>
<script>
import banner from './banner.vue'
export default{
  components:{banner},
  data(){
     return{

     }
  },
  methods:{

  },
  mounted(){

  }
}
</script>



<style scoped>
body html {
      margin: 0;
      padding: 0;

    }
    .container {
      width: 750rem;
      margin: 0 auto;
      
           
    }
    .brand-title {
      position: relative;
      width: 355px;
      height: 50px;
      margin-top: 55px;
      margin-left: 10px;
    }
    .brand-title p {
      position: absolute;
      left: 144px;
      top: -5px;
      font-size: 18px;
      font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
      font-weight: 400;
      color: #000000;
    }
    .ikea {
      position: relative;
      width: 355px;
      height: 187px;
      margin-left: 10px;
      margin-top: 10px;
    }
    .ikea-logo {
      width: 60px;
      height: 60px;
      float: left;

    }
    .ikea-title {
      width: 67px;
      height: 20px;
      
      float: left;
      margin-left: 5px;
      margin-top: 20px;
      font-size: 16px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
    }
    
    

    .ikea-button {
      width: 72px;
      height: 15px;
      
      float: left;
      margin-left: 135px;
      margin-top: 22px;
      font-size: 12px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #B5B3B0;
    }
    .ikea-img {
      position: absolute;
      width: 355px;
      height: 122px;
     
      
      top: 65px;
    }
    .gujia {
      position: relative;
      width: 355px;
      height: 187px;
      margin-left: 10px;
      margin-top: 10px;
    }
    .gujia-logo {
      width: 60px;
      height: 60px;
      float: left;

    }
    .gujia-title {
      width: 67px;
      height: 20px;
      
      float: left;
      margin-left: 5px;
      margin-top: 20px;
      font-size: 16px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
    }
    
    

    .gujia-button {
      width: 72px;
      height: 15px;
      
      float: left;
      margin-left: 135px;
      margin-top: 22px;
      font-size: 12px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #B5B3B0;
    }
    .gujia-img {
      position: absolute;
      width: 355px;
      height: 122px;
     
      
      top: 65px;
    }
    .suofeiya {
      position: relative;
      width: 355px;
      height: 187px;
      margin-left: 10px;
      margin-top: 10px;
    }
    .suofeiya-logo {
      width: 60px;
      height: 60px;
      float: left;

    }
    .suofeiya-title {
      width: 67px;
      height: 20px;
      
      float: left;
      margin-left: 5px;
      margin-top: 20px;
      font-size: 16px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
    }
    
    

    .suofeiya-button {
      width: 72px;
      height: 15px;
      
      float: left;
      margin-left: 135px;
      margin-top: 22px;
      font-size: 12px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #B5B3B0;
    }
    .suofeiya-img {
      position: absolute;
      width: 355px;
      height: 122px;
     
      
      top: 65px;
    }
    

</style>
